<template>
  <div>
    <!-- 输入框和提交按钮 -->
    <div class="operation-area">
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="inputValue"
      >
      </el-input>
      <el-button
        type="primary"
        icon="el-icon-s-promotion"
        @click="handleAddMessage"
        >提交</el-button
      >
    </div>

    <!-- 展示区 -->
    <div class="show-area">
      <!-- 我们现在已经有了很多Message -->
      <!-- 展示出来 -->
      <div class="message-container">
        <!-- 每一条留言都展示出来 -->
        <MessageItem
          v-for="(item, index) in message_list"
          :key="index"
          :message="item"
          @delMessageSuccess="hanleDelMessageSuccess"
        ></MessageItem>
      </div>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageIndex"
        :current-page="page"
        @current-change="handlePageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import Api from "../api";
import MessageItem from "@/components/message-item.vue";
export default {
  components: {
    MessageItem,
  },
  data() {
    return {
      inputValue: "",
      // 分页需要的三个信息
      // 1. total，总的条数有多少
      total: 0,
      // 2. page 当前的页数
      page: 1,
      // 3. pageIndex: 每页展示的数量
      pageIndex: 5,
      // 当前的消息的列表
      message_list: [],
    };
  },
  mounted() {
    // 页面挂载到浏览器显示出来的时候，执行的方法
    this.getMessage();
  },
  methods: {
    async getMessage() {
      const res = await Api.apiGetMessage({
        // 每一个请求要多少条数据
        pageIndex: this.pageIndex,
        // 当前是第几页
        page: this.page,
      });
      if (res.code === 1) {
        this.total = res.data.total_count || 0;
        this.message_list = res.data.message_list || [];
      }
    },
    async handleAddMessage() {
      if (!this.inputValue) {
        // 留言是空的，不给你过
        this.$notify.error({
          title: "错误",
          message: "提交的留言不能为空",
        });
        return;
      }
      // 让后端存数据
      const res = await Api.apiAddMessage({
        content: this.inputValue,
      });
      if (res.code === 1) {
        // 成功后要做的事
        // 1. 通知
        this.$notify({
          title: "成功",
          message: "提交留言成功",
          type: "success",
        });
        //2. 清空一下留言板
        this.inputValue = "";
        // 3. 重新获取一下这个留言
        this.getMessage();
      }
    },
    handlePageChange(current) {
      // 改变当前页的数据
      this.page = current;
      // 重新获取当前页的数据
      this.getMessage();
    },
    hanleDelMessageSuccess() {
      //更新数据，重新获取一下消息，刷新页面
      this.getMessage();
    },
  },
};
</script>
<style lang="less" scoped>
.operation-area {
  display: flex;
  .el-button {
    font-size: 24px;
  }
}
.show-area {
  .message-container {
    width: 100%;
  }
}
</style>
